{% extends 'layouts/base.html' %}

{% block title %}{{ title }}{% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-4 mb-lg-0 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h4 class="p-2">{{ page_name }}</h4>
                            </div>
                            <div class="col-lg-6 col-5 my-auto text-end">
                                <div class="dropdown float-lg-end pe-4">
                                    <a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown"
                                       aria-expanded="false">
                                        <i class="fa fa-ellipsis-v text-secondary"></i>
                                    </a>
                                    <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
                                        <li><a class="dropdown-item border-radius-md"
                                               href="{% url 'instance_detail' result.instance.id %}">返回实例详情</a>
                                        </li>
                                        <li><a class="dropdown-item border-radius-md"
                                               href="{% url 'result_list' %}">返回结果列表</a></li>
                                        <li><a id="dump" class="dropdown-item border-radius-md" href="javascript:;">导出结果</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <tbody class="p-3">
                                <tr>
                                    <td>
                                        <i class="fas fa-code text-sm ms-1" aria-hidden="true"></i>&nbsp;
                                        <span class="font-weight-bold">编号</span>
                                    </td>
                                    <td>{{ result.id }}</td>
                                </tr>
                                <tr class="p-3">
                                    <td>
                                        <i class="fas fa-newspaper text-sm ms-1" aria-hidden="true"></i>&nbsp;
                                        <span class="font-weight-bold">实例名称</span>
                                    </td>
                                    <td>
                                        <a href="{% url 'instance_detail' result.instance.id %}">
                                            {{ result.instance.name }}
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <i class="fas fa-file-signature text-sm ms-1" aria-hidden="true"></i>&nbsp;
                                        <span class="font-weight-bold">模型名称</span>
                                    </td>
                                    <td>
                                        <a href="{% url 'model_detail' result.instance.model.id %}">
                                            {{ result.instance.model.name }}
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <i class="fas fa-calendar text-sm ms-1" aria-hidden="true"></i>&nbsp;
                                        <span class="font-weight-bold">生成时间</span>
                                    </td>
                                    <td>{{ result.create_datetime }}</td>
                                </tr>
                                <tr>
                                    <td>
                                        <i class="fas fa-user text-sm ms-1" aria-hidden="true"></i>&nbsp;
                                        <span class="font-weight-bold">拥有者</span>
                                    </td>
                                    <td>{{ result.instance.of_project.owner }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h6>方案列表 </h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        编号
                                    </th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        名称
                                    </th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        描述
                                    </th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for a in alternatives %}
                                    <tr>
                                        <td>
                                            <div class="d-flex px-3 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ a.id }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ a.name }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center">
                                            <h6 class="mb-0 text-sm">{{ a.desc }}</h6>
                                        </td>
                                        <td class="align-middle text-center">
                                            <h6 class="mb-0 text-sm">
                                                <a href="{% url 'alternative_detail' a.id %}">
                                                    <u>查看</u>
                                                </a>
                                            </h6>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h6>结果详情</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        准则编号
                                    </th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        准则名称
                                    </th>
                                    {% for a in alternatives %}
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            {{ a.name }}
                                        </th>
                                    {% endfor %}
                                </tr>
                                </thead>
                                <tbody>
                                {% if result.instance.method == 'FAHP' %}
                                    {% for k, v in result_context.items %}
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ k }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ v.name }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            {% for alter, alter_v in v.values.items %}
                                                <td>
                                                    <div class="d-flex px-2 py-1">
                                                        <div class="d-flex flex-column justify-content-center">
                                                            <h6 class="mb-0 text-sm">
                                                                {% if alter_v == 1 %}
                                                                    很差
                                                                {% elif alter_v == 2 %}
                                                                    差
                                                                {% elif alter_v == 3 %}
                                                                    较差
                                                                {% elif alter_v == 4 %}
                                                                    较好
                                                                {% elif alter_v == 5 %}
                                                                    好
                                                                {% elif alter_v == 6 %}
                                                                    很好
                                                                {% endif %}
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    {% for k, v in result_context.items %}
                                        <tr>
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ k }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ v.name }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            {% for alter, alter_v in v.values.items %}
                                                <td>
                                                    <div class="d-flex px-2 py-1">
                                                        <div class="d-flex flex-column justify-content-center">
                                                            <h6 class="mb-0 text-sm">{{ alter_v|floatformat:3 }}</h6>
                                                        </div>
                                                    </div>
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h6>方案对比</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="d-flex flex-column h-100">
                            <div class="chart">
                                {{ bar|safe }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if result.instance.method == 'AHP' %}
    {% endif %}

{% endblock content %}

{% block javascripts %}
　　<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
　　<script>
　　　　function fake_click(obj) {
　　　　　　var ev = document.createEvent("MouseEvents");
　　　　　　ev.initMouseEvent(
　　　　　　　　"click", true, false, window, 0, 0, 0, 0, 0
　　　　　　　　, false, false, false, false, 0, null
　　　　　　);
　　　　　　obj.dispatchEvent(ev);
　　　　}

　　　　function export_raw(name, data) {
　　　　　　var urlObject = window.URL || window.webkitURL || window;

　　　　　　var export_blob = new Blob([data]);

　　　　　　var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
　　　　　　save_link.href = urlObject.createObjectURL(export_blob);
　　　　　　save_link.download = name;
　　　　　　fake_click(save_link);
　　　　}
　　　　var test=document.getElementsByTagName('html')[0].outerHTML;
　　　　console.log(test);
　　　　$('#dump').click(function() {
　　　　　　export_raw('test.html', test);
　　　　});
　　</script>
{% endblock %}